<template>
  <el-container>
    <el-header>
      <div class="logo" @click="toHome">
        <img src="@/assets/images/logo.png" alt="" />
      </div>
      <div class="menu">
        <el-menu mode="horizontal" text-color="#000" default-active="1" menu-trigger="click">
          <el-sub-menu index="7">
            <template #title>路况</template>
            <el-menu-item index="7-1" @click="getTimeRoad">实时路况</el-menu-item>
            <el-menu-item index="7-2" @click="removeTimeRoad">清除路况</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>道路堵塞</template>
            <el-menu-item index="2-2" @click="addHeatmap">热力图</el-menu-item>
            <el-menu-item index="2-3" @click="queryEvent">查事故</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3" v-if="usertype == 0 || usertype == 1">
            <template #title>视频监控</template>
            <el-menu-item index="3-1" @click="queryMonitor">查看监控</el-menu-item>
            <el-menu-item index="3-2" @click="closeQueryMonitor">关闭监控</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>事件管理</template>
            <el-menu-item index="4-1" @click="queryManager">管理事件</el-menu-item>
            <el-menu-item index="4-2" @click="queryByRectangle">拉框查询</el-menu-item>
            <el-menu-item index="4-3" @click="addEvent">添加事件</el-menu-item>
            <el-menu-item index="4-4" @click="cancelAddDraw">取消添加</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>公告管理</template>
            <el-menu-item index="5-1" @click="viewNotice">查看公告</el-menu-item>
            <el-menu-item index="5-2" @click="bufferAnalysis" v-if="usertype == 0 || usertype == 1">发布公告</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="1">
            <template #title>工具箱</template>
            <el-menu-item index="1-1" @click="measureMap('LineString')">测量距离</el-menu-item>
            <el-menu-item index="1-2" @click="measureMap('Polygon')">测量面积</el-menu-item>
            <el-menu-item index="1-3" @click="exportImg">导出图片</el-menu-item>
            <el-menu-item index="1-4" @click="exportPdf">导出PDF</el-menu-item>
            <el-menu-item index="1-5" @click="closeMeasure">关闭测量</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="6" @click="manageUser" v-if="usertype == 0">用户管理</el-menu-item>
        </el-menu>
      </div>
      <div class="search">
        <el-select v-model="searchKeyword" style="width: 85px; margin-right: 5px" placeholder="关键字">
          <el-option label="等级" value="事件等级" style="text-align: center" />
          <el-option label="类型" value="事件类型" style="text-align: center" />
          <el-option label="地点" value="发生地点" style="text-align: center" />
        </el-select>
        <el-input placeholder="事件查询" prefix-icon="Search" clearable style="width: 300px" v-model="searchMsg" />
        <el-button type="primary" @click="searchEvent">搜索</el-button>
      </div>
      <div class="person">
        <el-dropdown>
          <span class="name">
            <el-icon color="#909399" size="50px"><Avatar /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>修改信息</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              <el-dropdown-item divided @click="delMyUser">注销账户</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-main>
      <div class="maps">
        <my-map></my-map>
        <div id="popup" class="ol-popup" v-show="hideRoadEle">
          <el-button type="success">交通通畅</el-button>
          <el-button type="primary">交通缓慢</el-button>
          <el-button type="danger">交通堵塞</el-button>
        </div>
        <div id="hotmap" class="hitemap" v-show="hideHotEle">
          <h3>热力图</h3>
          <el-button type="success" class="closehot" @click="closeHotMap">关闭热力图</el-button>
          <div class="slider-demo-block">
            <span class="demonstration"> 热点半径</span>
            <el-slider v-model="value1" :max="50" @change="addHeatmap" />
          </div>
          <div class="slider-demo-block">
            <span class="demonstration"> 模糊尺寸</span>
            <el-slider v-model="value2" :max="50" @change="addHeatmap" />
          </div>
        </div>
        <div id="closeEvent" class="event-popup" v-show="hideEventEle">
          <el-button type="success" @click="closeQueryEvent">关闭事故查询</el-button>
        </div>
        <el-dialog v-model="mapState.dialogTableVisible" title="事件列表" width="74.3%" style="margin-top: 50px">
          <el-table style="margin-left: 50%; transform: translate(-50%)" :data="mapState.eventData" stripe border height="500" :default-sort="{ prop: 'FID', order: 'ascending' }">
            <el-table-column property="FID" sortable label="FID" width="100" align="center" />
            <el-table-column property="事件编号" label="事件编号" width="150" align="center" />
            <el-table-column property="事件等级" label="事件等级" width="100" align="center" />
            <el-table-column property="事件类型" label="事件类型" width="100" align="center" />
            <el-table-column property="驾驶员" label="驾驶员" width="100" align="center" v-if="usertype == 0 || usertype == 1" />
            <el-table-column property="车牌号" label="车牌号" width="100" align="center" v-if="usertype == 0 || usertype == 1" />
            <el-table-column property="发生地点" label="发生地点" width="150" align="center" />
            <el-table-column property="发生时间" label="发生时间" width="160" align="center" />
            <el-table-column label="操作" width="120" align="center" v-if="usertype == 0 || usertype == 1">
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button style="margin-left: 50%; transform: translate(-50%); margin-top: 10px" type="primary" @click="getEcharts">柱状图</el-button>
          <el-button style="margin-top: 10px" type="primary" @click="getPieEcharts">饼状图</el-button>
        </el-dialog>
        <el-dialog v-model="dialogEventDetails" title="事件详情" width="30%">
          <el-form :model="eventForm" label-width="120px">
            <el-form-item label="事件编号">
              <el-input v-model="eventForm.eventNumber" />
            </el-form-item>
            <el-form-item label="驾驶员">
              <el-input v-model="eventForm.dirverName" />
            </el-form-item>
            <el-form-item label="车牌号">
              <el-input v-model="eventForm.carNumber" />
            </el-form-item>
            <el-form-item label="发生地点">
              <el-input v-model="eventForm.eventPlace" />
            </el-form-item>
            <el-form-item label="事件等级">
              <el-select v-model="eventForm.eventGrade">
                <el-option label="1" value="1" />
                <el-option label="2" value="2" />
                <el-option label="3" value="3" />
                <el-option label="4" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="事件类型">
              <el-select v-model="eventForm.eventType">
                <el-option label="碰撞" value="碰撞" />
                <el-option label="刮擦" value="刮擦" />
                <el-option label="失火" value="失火" />
                <el-option label="翻车" value="翻车" />
                <el-option label="碾压" value="碾压" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
            <el-form-item label="发生时间">
              <el-date-picker v-model="eventForm.eventDate" type="datetime" placeholder="选择时间" value-format="YYYY-MM-DD HH:mm" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitUpdate" style="margin-top: 5px">确定</el-button>
              <el-button type="danger" @click="cancelUpdate" style="margin-top: 5px">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog v-model="addDialogEvent" title="添加事件" width="30%">
          <el-form :model="addEventForm" label-width="120px" ref="addEventEle">
            <el-form-item label="事件编号" prop="eventNumber">
              <el-input v-model="addEventForm.eventNumber" />
            </el-form-item>
            <el-form-item label="驾驶员" prop="dirverName">
              <el-input v-model="addEventForm.dirverName" />
            </el-form-item>
            <el-form-item label="车牌号" prop="carNumber">
              <el-input v-model="addEventForm.carNumber" />
            </el-form-item>
            <el-form-item label="发生地点" prop="eventPlace">
              <el-input v-model="addEventForm.eventPlace" />
            </el-form-item>
            <el-form-item label="事件等级" prop="eventGrade">
              <el-select v-model="addEventForm.eventGrade">
                <el-option label="1" value="1" />
                <el-option label="2" value="2" />
                <el-option label="3" value="3" />
                <el-option label="4" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="事件类型" prop="eventType">
              <el-select v-model="addEventForm.eventType">
                <el-option label="碰撞" value="碰撞" />
                <el-option label="刮擦" value="刮擦" />
                <el-option label="失火" value="失火" />
                <el-option label="翻车" value="翻车" />
                <el-option label="碾压" value="碾压" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
            <el-form-item label="发生时间" prop="eventDate">
              <el-date-picker v-model="addEventForm.eventDate" type="datetime" placeholder="选择时间" value-format="YYYY-MM-DD HH:mm" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="confirmAddEvent" style="margin-top: 5px">确定</el-button>
              <el-button type="danger" @click="cancelAddEvent" style="margin-top: 5px">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog v-model="bufferFlag" title="发布公告" width="30%">
          <el-table :data="reaultList" stripe border>
            <el-table-column property="name" label="小区" width="220" align="center" />
            <el-table-column property="tel" label="电话" width="180" align="center" />
          </el-table>
          <el-form label-width="120px" ref="addNoticeEle" :model="noticeForm">
            <el-form-item label="公告标题" prop="tittle">
              <el-input v-model="noticeForm.tittle" />
            </el-form-item>
            <el-form-item label="公告内容" prop="content">
              <el-input type="textarea" v-model="noticeForm.content" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="confirmNotice" style="margin-top: 5px">确认发布</el-button>
              <el-button type="danger" @click="cancelNotice" style="margin-top: 5px">取消发布</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog v-model="viewFlag" title="查看公告" width="48%">
          <el-table :data="noticeList" stripe border>
            <el-table-column property="id" label="id" width="50" align="center" />
            <el-table-column property="time" label="发布时间" width="200" align="center" />
            <el-table-column property="tittle" label="标题" width="280" align="center" />
            <el-table-column label="操作" width="160" align="center">
              <template #default="scope">
                <el-button size="small" @click="viewOneNotice(scope)">查看</el-button>
                <el-button size="small" type="danger" @click="editOneNotice(scope)" v-if="usertype == 0 || usertype == 1">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <el-dialog v-model="oneNoticeFlag" title="公告详情" width="30%">
          <el-form label-width="120px" :model="oneNoticeForm">
            <el-form-item label="公告标题" prop="tittle">
              <el-input v-model="oneNoticeForm.tittle" :disabled="canEdit" />
            </el-form-item>
            <el-form-item label="发布时间" prop="tittle">
              <el-input v-model="oneNoticeForm.time" :disabled="canEdit" />
            </el-form-item>
            <el-form-item label="公告内容" prop="content">
              <el-input type="textarea" v-model="oneNoticeForm.content" :disabled="canEdit" :rows="5" />
            </el-form-item>
            <el-form-item v-if="editNoticeFlag">
              <el-button type="primary" @click="confirmEditNotice" style="margin-top: 5px">确认修改</el-button>
              <el-button type="danger" @click="deleteoneNotice" style="margin-top: 5px">删除公告</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <el-dialog v-model="echartsDialog" width="40%">
          <div ref="myechats" class="myechats"></div>
        </el-dialog>
        <el-dialog v-model="userDialog" title="用户管理" width="40%" draggable :close-on-click-modal="false">
          <el-table :data="users" height="250" style="width: 100%">
            <el-table-column prop="id" label="id" width="80" align="center" />
            <el-table-column prop="username" label="用户名" width="100" align="center" />
            <el-table-column prop="usertype" label="用户类型" width="100" align="center"></el-table-column>
            <el-table-column label="操作" min-width="120px" align="center" fixed="right">
              <template v-slot:default="users">
                <el-button type="primary" size="small" @click="editUser(users.row)"
                  ><el-icon><Edit /></el-icon
                ></el-button>
                <el-button type="danger" size="small" @click="delUser(users.row)"
                  ><el-icon><Delete /></el-icon
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <el-dialog v-model="updateUserDialog" title="修改用户权限" width="30%" draggable :close-on-click-modal="false">
          <el-form :model="userForm" label-width="120px">
            <el-form-item label="id">
              <el-input v-model="userForm.id" disabled />
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="userForm.username" disabled />
            </el-form-item>
            <el-form-item label="用户类型">
              <el-select v-model="userForm.usertype">
                <el-option label="管理员" value="0" />
                <el-option label="交通部门" value="1" />
                <el-option label="普通用户" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item id="submitUserBtn">
              <el-button type="primary" @click="changeUserAuth">修改</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </el-main>
  </el-container>
</template>
<script setup>
import { toRefs } from "vue"
import MyMap from "../components/MyMap.vue"
import { useToolsBox } from "./hooks/useMeasure.js"
import { useGetRoad } from "./hooks/useGetRoad.js"
import { useHotMap } from "./hooks/useHotMap.js"
import { useQueryEvent } from "./hooks/useGetEvent.js"
import { useQueryMonitor } from "./hooks/useGetMonitor.js"
import { useManagerEvent } from "./hooks/useManagerEvent.js"
import { useSearchEvent } from "./hooks/useSearchEvent.js"
import { useRectangleEvent } from "./hooks/useRectangleQuery.js"
import { useAddNotice } from "./hooks/useAddNotice.js"
import { useUser } from "./hooks/useUser.js"
import { useAddEvent } from "./hooks/useAddEvent"

import { useMapStore } from "../store/useMap.js"

const { mapState } = toRefs(useMapStore())
const { getTimeRoad, removeTimeRoad, hideRoadEle } = useGetRoad()
const { measureMap, closeMeasure, exportImg, exportPdf } = useToolsBox()
const { addHeatmap, closeHotMap, value1, value2, hideHotEle } = useHotMap()
const { queryEvent, closeQueryEvent, hideEventEle } = useQueryEvent()
const { queryMonitor, closeQueryMonitor } = useQueryMonitor()
const { queryManager, handleDelete, handleEdit, eventForm, dialogEventDetails, onSubmitUpdate, cancelUpdate, getEcharts, myechats, echartsDialog, getPieEcharts } = useManagerEvent()
const { searchMsg, searchKeyword, searchEvent } = useSearchEvent()
const { queryByRectangle } = useRectangleEvent()
const { addEvent, addEventForm, addDialogEvent, confirmAddEvent, cancelAddEvent, addEventEle, cancelAddDraw } = useAddEvent()
const {
  bufferAnalysis,
  bufferFlag,
  reaultList,
  confirmNotice,
  noticeForm,
  addNoticeEle,
  cancelNotice,
  viewNotice,
  viewFlag,
  noticeList,
  viewOneNotice,
  oneNoticeForm,
  oneNoticeFlag,
  editNoticeFlag,
  editOneNotice,
  canEdit,
  confirmEditNotice,
  deleteoneNotice,
} = useAddNotice()
const { logout, userDialog, users, updateUserDialog, userForm, editUser, delUser, changeUserAuth, manageUser, delMyUser } = useUser()
const usertype = JSON.parse(localStorage.getItem("userinfo")).usertype
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
.el-header {
  width: 95%;
  margin: 0 auto;
}
.logo {
  position: absolute;
  height: 60px;
  width: 160px;
  img {
    // height: 100%;
    width: 100%;
  }
}
.menu {
  position: relative;
  left: 170px;
  width: 800px;
}
.search {
  position: absolute;
  top: 15px;
  left: 990px;
}
.person {
  position: absolute;
  top: 5px;
  left: 1450px;
}
.maps {
  width: 100%;
  height: 650px;
}
.ol-popup {
  position: absolute;
  background-color: rgba(252, 249, 242, 0.3);
  border-radius: 10px;
  border: 2px solid #cccccc;
  z-index: 999;
  display: flex;
}
.event-popup {
  position: absolute;
  background-color: rgba(252, 249, 242, 0.3);
  // padding: 15px;
  border-radius: 10px;
  border: 2px solid #cccccc;
  z-index: 999;
  display: flex;
}
.hitemap {
  position: absolute;
  background-color: rgba(252, 249, 242, 0.7);
  padding: 15px;
  width: 400px;
  border-radius: 10px;
  border: 2px solid #cccccc;
  z-index: 999;
  .slider-demo-block {
    display: flex;
    align-items: center;
    .el-slider {
      margin-top: 0;
      margin-left: 12px;
    }
    .demonstration {
      font-size: 14px;
      color: black;
      font-size: 1em;
      line-height: 44px;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 0;
    }
  }
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 70%;
}
.closehot {
  position: absolute;
  left: 320px;
  top: 15px;
}
&:deep(.tooltip) {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}
&:deep(.tooltip-measure) {
  opacity: 1;
  font-weight: bold;
}
&:deep(.tooltip-static) {
  background-color: #76ff03;
  color: black;
  border: 1px solid white;
  font-weight: 900;
}
&:deep(.tooltip-event) {
  background-color: #ffeb3b;
  color: black;
  border: 1px solid white;
  font-weight: 900;
}
&:deep(.tooltip-monitor) {
  background-color: #fafafa;
  color: black;
  border: 1px solid white;
  font-weight: 900;
  padding: 5px;
  video {
    margin-top: 10px;
    margin-left: 15px;
  }
}
.el-button {
  padding-left: 5px;
  padding-right: 5px;
}
&:deep(.el-form-item__label) {
  margin-left: -50px;
}
.myechats {
  height: 300px;
}
</style>
